<script setup>
import {computed, onMounted, ref} from 'vue'
import request from "@/utils/request";
import router from "@/router";
import {ElMessage} from "element-plus";


const flag = ref(false)
const allOrderData = ref()
const notPayOrderData = ref([])
const inProgressOrderData = ref([])
const completeOrderData = ref([])
const cancelOrderData = ref([])
const loadOrderData = ()=>{
  request.get('/order/user').then(res => {
    allOrderData.value=''
    notPayOrderData.value=[]
    inProgressOrderData.value=[]
    completeOrderData.value=[]
    cancelOrderData.value=[]
    allOrderData.value = res.data
    console.log(res.data)
    for(let item of res.data){
      if(item.orderStatus === "0"){
        cancelOrderData.value.push(item)
      }else if(item.orderStatus === "1"){
        inProgressOrderData.value.push(item)
      }else if(item.orderStatus === "2"){
        completeOrderData.value.push(item)
      }else if(item.orderStatus === "3"){
        notPayOrderData.value.push(item)
      }
    }
    console.log(notPayOrderData.value)
    })
}
//查看订单详情------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
const dialogVisible =ref(false)
const orderData = ref()
const handleClose = ()=>{
  dialogVisible.value = false
  orderData.value=''
}
const showOrderDetail = (order)=>{
  orderData.value=order
  dialogVisible.value=true
}
//去支付----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
const handlePayment = (orderId)=>{
  router.push("/payment?orderId="+orderId)
}
//取消订单--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
const cancelOrderDialogVisible = ref(false);
const cancellationReason = ref('')
const currentOrder = ref('')
const handleCancelOrderDialogClose = ()=>{
  cancelOrderDialogVisible.value = false
  currentOrder.value=''
}
const handleCancelOrderDialogOpen= (orderId) => {
  cancelOrderDialogVisible.value=true;
  currentOrder.value=orderId
}
const handleCancel = ()=>{
  if(confirm("确定取消订单吗？")){
    const formData = ref({
      cancellationReason : cancellationReason.value

    })
    request.post(`/order/cancel/`+currentOrder.value, formData.value).then(res => {
      if(res.code === 200){
        ElMessage.success("取消成功")
        handleCancelOrderDialogClose()
        loadOrderData()
      }
    })
  }
}
//完成订单还车
const handleCompleteOrder = (id)=>{
  if(confirm("确定还车吗？")){
    request.post(`/order/complete/`+id).then(res => {
      if(res.code === 200){
        ElMessage.success("还车成功")

        loadOrderData()
      }
    })
  }

}
//日期格式formater
const formatDate= (date)=> {
  var d = new Date(date),
      month = '' + (d.getMonth() + 1),
      day = '' + d.getDate(),
      year = d.getFullYear();

  if (month.length < 2)
    month = '0' + month;
  if (day.length < 2)
    day = '0' + day;

  return [year, month, day].join('-');
}
//字典数值---------------------------------------------------------------------------------------
const orderStatusOptions = ref()
const cityOptions = ref()
const paymentMethodOptions = ref()
const storeOptions = ref()


//加载字典项----------------------------------------------------------------------
const loadAllDictOptions = ()=>{
  loadDictOptionsByCode(orderStatusOptions,'bus_order_status')
  loadDictOptionsByCode(cityOptions,'bus_city_id')
  loadDictOptionsByCode(paymentMethodOptions,'bus_order_payment_method')
  loadDictOptionsByCode(storeOptions,'bus_order_store')



}
//formatter-----------------------------------------------------------------
const orderStatusFormatter = (val)=>{
  for(let index in orderStatusOptions.value){
    if(orderStatusOptions.value[index].value==val){
      val = orderStatusOptions.value[index].label
      return val
    }
  }
  return val
}
const cityFormatter = (val)=>{
  for(let index in cityOptions.value){
    if(cityOptions.value[index].value==val){
      val = cityOptions.value[index].label
      return val
    }
  }
  return val
}
const paymentMethodFormatter = (val)=>{
  for(let index in paymentMethodOptions.value){
    if(paymentMethodOptions.value[index].value==val){
      val = paymentMethodOptions.value[index].label
      return val
    }
  }
  return val
}
const storeFormatter = (val)=>{
  for(let index in storeOptions.value){
    if(storeOptions.value[index].value==val){
      val = storeOptions.value[index].label
      return val
    }
  }
  return val
}
//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------



onMounted(()=>{
  loadOrderData()
  loadAllDictOptions()
  flag.value = true
})
</script>



<template>
  <div style="width: 100%;border: 1px solid rgb(220, 223, 230)">
    <div style="padding: 20px 20px" v-if="flag=true">
      <h2>订单管理</h2>
      <el-tabs type="border-card" style="width: 100%">
        <el-tab-pane >
          <template #label>
            <span >
              <span>全部订单</span>
            </span>
          </template>
          <el-table :data="allOrderData" style="width: 100%">
            <el-table-column prop="id" label="订单编号" width="180">
              <template #default="scope">
                <el-button link type="primary" @click="console.log(scope.row); showOrderDetail(scope.row)">{{scope.row.id}}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="订单创建时间" width="180" />
            <el-table-column prop="brandInfo" label="车辆信息" />
            <el-table-column  label="	取车时间" >
              <template #default="scope">
                <span >{{formatDate(scope.row.startDate)}}</span>
              </template>
            </el-table-column>
            <el-table-column  label="	还车时间" >
              <template #default="scope">
                <span >{{formatDate(scope.row.endDate)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderStatus" label="	订单状态" >
              <template #default="scope">
                <span >{{orderStatusFormatter(scope.row.orderStatus)}}</span>
              </template>
            </el-table-column>

          </el-table>


        </el-tab-pane>
        <el-tab-pane >
          <template #label>
            <span >
              <span>待支付</span>
            </span>
          </template>
          <el-table :data="notPayOrderData" style="width: 100%">
            <el-table-column prop="id" label="订单编号" width="180">
              <template #default="scope">
                <el-button link type="primary" @click="showOrderDetail(scope.row)">{{scope.row.id}}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="订单创建时间" />
            <el-table-column prop="brandInfo" label="车辆信息" />
            <el-table-column  label="	取车时间" >
              <template #default="scope">
                <span >{{formatDate(scope.row.startDate)}}</span>
              </template>
            </el-table-column>
            <el-table-column  label="	还车时间" >
              <template #default="scope">
                <span >{{formatDate(scope.row.endDate)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderStatus" label="	订单状态" >
              <template #default="scope">
                <span >{{orderStatusFormatter(scope.row.orderStatus)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" >
              <template #default="scope">
                <el-button size="small" link type="primary" @click="handlePayment(scope.row.id)">去支付</el-button>
                <el-button size="small" link type="primary" @click="handleCancelOrderDialogOpen(scope.row.id)">取消</el-button>
              </template>
            </el-table-column>
          </el-table>


        </el-tab-pane>
        <el-tab-pane >
          <template #label>
            <span >
              <span>租赁中</span>
            </span>
          </template>
          <el-table :data="inProgressOrderData" style="width: 100%">
            <el-table-column prop="id" label="订单编号" width="180">
              <template #default="scope">
                <el-button link type="primary" @click="showOrderDetail(scope.row)">{{scope.row.id}}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="订单创建时间" width="180" />
            <el-table-column prop="brandInfo" label="车辆信息" />
            <el-table-column  label="	取车时间" >
              <template #default="scope">
                <span >{{formatDate(scope.row.startDate)}}</span>
              </template>
            </el-table-column>
            <el-table-column  label="	还车时间" >
              <template #default="scope">
                <span >{{formatDate(scope.row.endDate)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderStatus" label="	订单状态" >
              <template #default="scope">
                <span >{{orderStatusFormatter(scope.row.orderStatus)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作"  width="150">
              <template #default="scope">
                <el-button size="small" link type="primary" @click="handleCompleteOrder(scope.row.id)">还车</el-button>
                <el-button size="small" link type="primary" @click="handleCancelOrderDialogOpen(scope.row.id)">取消</el-button>
              </template>
            </el-table-column>
          </el-table>


        </el-tab-pane>
        <el-tab-pane>
          <template #label>
            <span >
              <span>已完成</span>
            </span>
          </template>
          <el-table :data="completeOrderData" style="width: 100%">
            <el-table-column prop="id" label="订单编号" width="180">
              <template #default="scope">
                <el-button link type="primary" @click="showOrderDetail(scope.row)">{{scope.row.id}}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="订单创建时间" width="180" />
            <el-table-column prop="brandInfo" label="车辆信息" />
            <el-table-column  label="	取车时间" >
              <template #default="scope">
                <span >{{formatDate(scope.row.startDate)}}</span>
              </template>
            </el-table-column>
            <el-table-column  label="	还车时间" >
              <template #default="scope">
                <span >{{formatDate(scope.row.endDate)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderStatus" label="	订单状态" >
              <template #default="scope">
                <span >{{orderStatusFormatter(scope.row.orderStatus)}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane>
          <template #label>
            <span >
              <span>已取消</span>
            </span>
          </template>
          <el-table :data="cancelOrderData" style="width: 100%">
            <el-table-column prop="id" label="订单编号" width="180">
              <template #default="scope">
                <el-button link type="primary" @click="showOrderDetail(scope.row)">{{scope.row.id}}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="订单创建时间" width="180" />
            <el-table-column prop="brandInfo" label="车辆信息" />
            <el-table-column  label="	取车时间" >
              <template #default="scope">
                <span >{{formatDate(scope.row.startDate)}}</span>
              </template>
            </el-table-column>
            <el-table-column  label="	还车时间" >
              <template #default="scope">
                <span >{{formatDate(scope.row.endDate)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderStatus" label="	订单状态" >
              <template #default="scope">
                <span >{{orderStatusFormatter(scope.row.orderStatus)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="cancellationTime" label="订单取消时间" width="180" />


          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="订单详情" style="width: 700px" :before-close="handleClose">
    <el-form ref="form" :model="orderData" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单id" label-width="120px" prop="id">
            : {{orderData.id}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆信息" label-width="120px" prop="brandInfo">
            : {{orderData.brandInfo}}
          </el-form-item>

        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="取车城市id" label-width="120px" prop="pickupCityId">
            : {{cityFormatter(orderData.pickupCityId)}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="取车地" label-width="120px" prop="addr">
            : {{storeFormatter(orderData.addr)}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="取车时间" label-width="120px" prop="startDate">
            : {{formatDate(orderData.startDate)}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="还车时间" label-width="120px" prop="endDate">
            : {{formatDate(orderData.endDate)}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="花费金额" label-width="120px" prop="totalCost">
            : {{orderData.totalCost}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付类型" label-width="120px" prop="paymentMethod">
            : {{paymentMethodFormatter(orderData.paymentMethod)}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单创建时间" prop="createTime" style="margin-right: 40px" label-width="120px">
            : {{orderData.createTime}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单支付时间" label-width="120px" prop="paymentDate">
            : {{orderData.paymentDate}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单状态" label-width="120px" prop="orderStatus">
            : {{orderStatusFormatter(orderData.orderStatus)}}
          </el-form-item>

        </el-col>
        <el-col :span="8">

        </el-col>
        <el-col :span="4">
          <el-button @click="handleClose">返回</el-button>

        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
  <el-dialog v-model="cancelOrderDialogVisible" title="取消订单" style="width: 600px" :before-close="handleCancelOrderDialogClose">
    <el-form-item label-width="20">
      <el-form-item label="取消原因">
        <el-input
            v-model="cancellationReason"
            style="width: 450px"
            :rows="2"
            type="textarea"
            placeholder="请输入原因"
        />
      </el-form-item>
    </el-form-item>
    <el-row>
      <el-col :span="16"></el-col>
      <el-col :span="8">
        <el-button @click="handleCancelOrderDialogClose">返回</el-button>
        <el-button type="primary" @click="handleCancel">确定取消</el-button>

      </el-col>
    </el-row>


  </el-dialog>


</template>

<style scoped>

</style>